<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>codefun</title>
    <link rel="stylesheet" href="../../index.css" />
    <link rel="stylesheet" href="invoice0.css" />
    <script>
        function get() {
            // 使用JavaScript的fetch API发送HTTP请求获取数据
            fetch('http://localhost:8080/price') // 替换为你的后端接口地址
                .then(response => response.json())
                .then(data => {
                    // 将获取到的数据添加到HTML页面中的列表元素中
                    const blogList = document.getElementById('blogList');
                    const plot =document.getElementById('plot');
                    // 将 JSON 对象转换为一个数组
                    const dataArray = Object.values(data);
                    console.log(dataArray[2].length);

                    console.log(dataArray[2]);
                    dataArray[2].forEach(blog => {
                        const div1 = document.createElement('div1');
                        const div2= document.createElement('div2');
                        const length = dataArray[2].length;

                        div1.innerHTML = `
        <ul class="flex-row justify-between items-center group_11">
              <li class="flex-row items-center space-x-16">
                <div class="flex-col justify-start items-center "></div>
                <div class="flex-col items-start group_12 space-y-10">
                  <span class="font_6 text_12">${blog.name}</span>
                  <span class="font_10 text_14">${blog.phone}</span>
                </div>

                <span class="font_8 text_13">${blog.price}</span>
                <div class="flex-row items-center shrink-0 space-x-92">
                  <div class="flex-col justify-start items-center text-wrapper_5"><span class="font_9">Paid</span></div>
                  <div class="flex-row space-x-58">
                    <span class="font_8">Aug 12, 2019</span>

                  </div>
                </div>
              </li>

        <ul/>`; // 注意这里改为遍历data数组并访问每个博客对象的属性
                        div2.innerHTML = `      <div class="flex-col justify-start items-center shrink-0 text-wrapper_3">
                <span class="font_5 text_7">${length}</span>`;
                        blogList.appendChild(div1);
                        plot.appendChild(div2);
                    });
                })
                .catch(error => {
                    console.error("Failed to fetch blogs:", error);
                });
        }
        get(); // 调用函数以发送请求并填充数据
    </script>
  </head>
  <body>
    <div class="flex-row page">

      <div class="flex-col flex-auto self-start space-y-31">

        <div class="flex-col group_6">
          <div class="flex-row justify-between items-center group_7">
            <div class="flex-row items-center space-x-8">
              <span class="text_6">Invoice</span>
                <ul id="plot"></ul>

              </div>
            </div>
            <div class="flex-row space-x-38">
              <div class="flex-row items-center section_4 space-x-16">
                <img
                  class="image_5"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273103809872555.png"
                />
                <span class="font_1">Search..</span>
              </div>
              <div class="flex-col justify-start items-start text-wrapper_2">
                <span class="font_6 text_8">Create New Invoice</span>
              </div>
            </div>
          </div>
          <div class="flex-col section_5">
            <div class="flex-row justify-between group_6">
              <span class="font_5 text_10">CLIENT</span>
              <div class="flex-row group_10 space-x-98">
                <div class="flex-row shrink-0 space-x-84">
                  <span class="font_5 text_10">PRICE</span>
                  <span class="font_5 text_10">STATUS</span>
                </div>
                <span class="font_5 text_10 text_11">DATE</span>
              </div>
            </div>
              <ul id="blogList"></ul>


<!--            <div class="flex-row justify-between items-center section_6">-->
<!--              <div class="flex-row items-center group_15 space-x-16">-->
<!--                <div class="flex-col justify-start items-center text-wrapper_6">-->
<!--                  <span class="font_2 text_15">NA</span>-->
<!--                </div>-->
<!--                <div class="flex-col items-start group_16 space-y-12">-->
<!--                  <span class="font_11">Nandroid</span>-->
<!--                  <span class="font_10 text_14">nandroid@mail.com</span>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="flex-row items-center group_17 space-x-108">-->
<!--                <span class="font_8 text_16">$ 532</span>-->
<!--                <div class="flex-row items-center shrink-0 space-x-92">-->
<!--                  <div class="flex-col justify-start items-center text-wrapper_5"><span class="font_9">Paid</span></div>-->
<!--                  <div class="flex-row space-x-68">-->
<!--                    <span class="font_8 text_17">Jun 7, 2019</span>-->
<!--                    <img-->
<!--                      class="shrink-0 image_8"-->
<!--                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273124543368992.png"-->
<!--                    />-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="flex-row justify-between items-center group_19">-->
<!--              <div class="flex-row items-center space-x-16">-->
<!--                <div class="flex-col justify-start items-center text-wrapper_7">-->
<!--                  <span class="font_2 text_20">RE</span>-->
<!--                </div>-->
<!--                <div class="flex-col items-start group_20 space-y-10">-->
<!--                  <span class="font_6 text_19">Respiration Corp</span>-->
<!--                  <span class="font_10 text_14">respcorp@mail.com</span>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="flex-row items-center group_21 space-x-102">-->
<!--                <span class="font_8 text_21">$ 1322</span>-->
<!--                <div class="flex-row items-center shrink-0 space-x-80">-->
<!--                  <div class="flex-col justify-start items-center text-wrapper_8">-->
<!--                    <span class="font_12">Billing</span>-->
<!--                  </div>-->
<!--                  <div class="flex-row space-x-58">-->
<!--                    <span class="font_8 text_22">Oct 25, 2018</span>-->
<!--                    <img-->
<!--                      class="shrink-0 image_8"-->
<!--                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273124543368992.png"-->
<!--                    />-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="flex-row justify-between items-center section_7">-->
<!--              <div class="flex-row items-center space-x-16">-->
<!--                <div class="flex-col justify-start items-center text-wrapper_9"><span class="font_2">ON</span></div>-->
<!--                <div class="flex-col items-start group_23 space-y-10">-->
<!--                  <span class="font_6 text_23">Onion App</span>-->
<!--                  <span class="font_10 text_14">onionapp@mail.com</span>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="flex-row items-center group_24 space-x-112">-->
<!--                <span class="font_8 text_24">$ 521</span>-->
<!--                <div class="flex-row items-center shrink-0 space-x-76">-->
<!--                  <div class="flex-col justify-start items-center text-wrapper_10">-->
<!--                    <span class="font_13">Unpaid</span>-->
<!--                  </div>-->
<!--                  <div class="flex-row space-x-62">-->
<!--                    <span class="font_8 text_25">Mar 2, 2020</span>-->
<!--                    <img-->
<!--                      class="shrink-0 image_8"-->
<!--                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273124543368992.png"-->
<!--                    />-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="flex-row justify-between items-center group_19">-->
<!--              <div class="flex-row items-center space-x-16">-->
<!--                <div class="flex-col justify-start items-center text-wrapper_4"><span class="font_2">NO</span></div>-->
<!--                <div class="flex-col items-start group_23 space-y-12">-->
<!--                  <span class="font_11">NoticeMe</span>-->
<!--                  <span class="font_10 text_14">noticeme@mail.com</span>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="flex-row items-center group_21 space-x-110">-->
<!--                <span class="font_8 text_21">$ 576</span>-->
<!--                <div class="flex-row items-center shrink-0 space-x-80">-->
<!--                  <div class="flex-col justify-start items-center text-wrapper_8">-->
<!--                    <span class="font_12">Billing</span>-->
<!--                  </div>-->
<!--                  <div class="flex-row space-x-58">-->
<!--                    <span class="font_8">Aug 12, 2019</span>-->
<!--                    <img-->
<!--                      class="shrink-0 image_8"-->
<!--                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273124543368992.png"-->
<!--                    />-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="flex-row justify-between items-center section_7">-->
<!--              <div class="flex-row items-center space-x-16">-->
<!--                <div class="flex-col justify-start items-center text-wrapper_6"><span class="font_2">GR</span></div>-->
<!--                <div class="flex-col items-start group_27 space-y-10">-->
<!--                  <span class="font_14">GrumpyCat.co</span>-->
<!--                  <span class="font_10 text_14">grumpycatco@mail.com</span>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="flex-row items-center group_24 space-x-108">-->
<!--                <span class="font_8 text_24">$ 320</span>-->
<!--                <div class="flex-row items-center shrink-0">-->
<!--                  <div class="flex-col justify-start items-center shrink-0 text-wrapper_10">-->
<!--                    <span class="font_13">Unpaid</span>-->
<!--                  </div>-->
<!--                  <span class="font_8 text_28">Jun 7, 2019</span>-->
<!--                  <img-->
<!--                    class="shrink-0 image_8 image_13"-->
<!--                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273124543368992.png"-->
<!--                  />-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="flex-row justify-between items-center group_19">-->
<!--              <div class="flex-row items-center space-x-16">-->
<!--                <div class="flex-col justify-start items-center text-wrapper_7">-->
<!--                  <span class="font_2 text_20">FM</span>-->
<!--                </div>-->
<!--                <div class="flex-col items-start group_29 space-y-8">-->
<!--                  <span class="font_6 text_30">Flying Mango</span>-->
<!--                  <span class="font_10 text_14">flyingmango@mail.com</span>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="flex-row items-center group_21 space-x-102">-->
<!--                <span class="font_8 text_21">$ 2541</span>-->
<!--                <div class="flex-row items-center shrink-0 space-x-74">-->
<!--                  <div class="flex-col justify-start items-center text-wrapper_10">-->
<!--                    <span class="font_13">Unpaid</span>-->
<!--                  </div>-->
<!--                  <div class="flex-row space-x-58">-->
<!--                    <span class="font_8">Aug 12, 2019</span>-->
<!--                    <img-->
<!--                      class="shrink-0 image_8"-->
<!--                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273124543368992.png"-->
<!--                    />-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="flex-row justify-between items-center section_7">-->
<!--              <div class="flex-row items-center space-x-16">-->
<!--                <div class="flex-col justify-start items-center text-wrapper_9"><span class="font_2">SH</span></div>-->
<!--                <div class="flex-col items-start group_32 space-y-10">-->
<!--                  <span class="font_14">Shut The Foot Up</span>-->
<!--                  <span class="font_10 text_14">stfu@mail.com</span>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="flex-row items-center group_24 space-x-108">-->
<!--                <span class="font_8 text_24">$ 320</span>-->
<!--                <div class="flex-row items-center shrink-0 space-x-74">-->
<!--                  <div class="flex-col justify-start items-center text-wrapper_10">-->
<!--                    <span class="font_13">Unpaid</span>-->
<!--                  </div>-->
<!--                  <div class="flex-row space-x-58">-->
<!--                    <span class="font_8 text_25">Oct 25, 2018</span>-->
<!--                    <img-->
<!--                      class="shrink-0 image_8"-->
<!--                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273124543368992.png"-->
<!--                    />-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

          </div>
        </div>
      </div>

  </body>
</html>